<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2021-11-22 16:49:26
 * @LastEditTime: 2022-02-07 12:00:44
 * @LastEditors: xuechengwu
-->
<template>
  <div class="xue-col" :style="spanStyle">
      <slot></slot>
  </div>
</template>

<script>
export default {
    props: {
        span: {
            type: [Number, String],
            default: () => 1,
        },
    },
    computed: {
        spanStyle() {
            const { span = 1 } = this;
            return {
                width: `${Number(span) / 24 * 100}%`
            };
        }
    }
}
</script>

<style scoped>
.xue-col {
    display: inline-block;
    box-sizing: border-box;
}
</style>